<template>
 <div class="box">
  <div class="course-top">
      <div class="top-left">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>布置作业</el-breadcrumb-item>
          <el-breadcrumb-item>检查作业</el-breadcrumb-item>
          <el-breadcrumb-item>作业详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
       <div @click="back()" class="top-right">返回</div>
    </div>
  <div class="container">
    <div style="padding-left: 5%">
      <el-form :model="submitForm" label-width="100px" class="demo-form-inline">
        <el-form-item label="作业总览"> </el-form-item>

        <el-row class="showAll">
          <el-col :span="4">
            <div>
              <span>运动总时长:</span>
              <span
                >{{ stuInfo.allhomeworkshow.daySportTime.toFixed(1) }}分钟</span
              >
            </div></el-col
          >
          <el-col :span="5">
            <div>
              <span>本周总时长:</span>
              <span
                >{{
                  stuInfo.allhomeworkshow.weekSportTime.toFixed(1)
                }}分钟</span
              >
            </div></el-col
          >
          <el-col :span="5">
            <div>
              <span>本周运动项目数:</span>
              <span>{{ stuInfo.allhomeworkshow.countProject }}</span>
            </div></el-col
          >
          <el-col :span="5"
            ><div>
              <span>本周运动项目组数:</span>
              <span>{{ stuInfo.allhomeworkshow.groupSpotrt }}组</span>
            </div></el-col
          >
          <el-col :span="6">
            <div>
              <span>运动器材准备:</span>
              <span>{{ stuInfo.allhomeworkshow.stRequipment }}</span>
            </div></el-col
          >
        </el-row>

        <el-form-item style="margin-top: 10px" label="作业内容"> </el-form-item>

        <div v-for="(item, i) in stuInfo.homework" :key="item.trPeId">
          <!-- <el-col :span="10"> -->
          <div class="project-item">
            <div class="item-top">
              <span>{{ item.stageName }}-{{ item.sportTime }}秒</span>
            </div>
            <div
              style="display: flex"
              v-for="(v, index) in item.stuWork"
              :key="index"
            >
              <div style="margin-top: 15px">
                <div class="item-main">
                  <div class="main-image">
                    <img
                      :src="$store.state.user.BASE_URL + v.peSnapshot"
                      alt=""
                    />
                  </div>
                  <div class="main-right">
                    <div class="main-title">
                      <span>{{ v.trPeName }}</span>
                    </div>
                    <div class="main-orientation" style="margin-top: 30px">
                      <div v-if="i == 0 || i == 1 || i == 2">
                        <span>屏幕朝向:</span>
                        <span
                          >{{
                            v.peExecuteDirection == 1 ? "竖屏" : "横屏"
                          }}项目</span
                        >
                      </div>
                    </div>
                    <div class="main-orientation">
                      <div v-if="i == 0 || i == 1 || i == 2">
                        <span>运动强度:</span>
                        <span>{{
                          v.peStrength == 1
                            ? "简单"
                            : v.peStrength == 2
                            ? "中等"
                            : "困难"
                        }}</span>
                      </div>

                    </div>

                    <div class="main-number" v-if="v.trApplication">
                      <div>
                        <span>组数:{{ v.trApplication }}</span>
                      </div>
                    </div>
                    <div
                      style="color: red; font-size: 6px; margin-top: 18px"
                      v-if="v.trType == 1"
                    >
                      * 此项作业为学生手动打卡
                    </div>
                  </div>
                </div>
              </div>
              <div
                style="width: 600px; height: 200px; margin-top: 20px"
                v-if="i == 0 || i == 1 || i == 2"
              >
                <el-carousel
                  indicator-position="none"
                  :interval="4000"
                  type="card"
                  height="200px"
                  v-if="v.trType == 0"
                >
                  <el-carousel-item v-for="(i, index) in v.tsPic" :key="index">
                    <h3 class="medium">
                      <img width="105px" height="180px" :src="i" alt="" />
                    </h3>
                  </el-carousel-item>
                </el-carousel>
                <div v-if="v.trType == 1">
                  <div v-if="v.trIsAccomplish == 3" style="float: right">
                    <el-button
                      @click="changeAuditJob(v, 1)"
                      size="small"
                      type="primary"
                      >审核</el-button
                    >
                  </div>
                  <div style="width: 190px; height: 190px; margin-left: 32%;margin-top: 10px">
                    <video
                      style="
                        width: auto;
                        height: auto;
                        max-height: 100%;
                        max-width: 100%;
                      "
                      :src="$store.state.user.BASE_URL + v.tsPic[0]"
                      controls="controls"
                    />
                  </div>
                </div>
              </div>
              <div
                style="width: 600px; height: 200px; margin-top: 20px"
                v-if="i == 3"
              >
                <div v-if="v.trType == 1">
                  <div v-if="v.trIsAccomplish == 3" style="float: right">
                    <el-button
                      @click="changeAuditJob(v, 2)"
                      size="small"
                      type="primary"
                      >审核</el-button
                    >
                  </div>
                  <div style="width: 190px; height: 190px; margin-left: 32%;margin-top:10px;">
                    <video
                      v-if="v.tsPic"
                      style="
                        width: auto;
                        height: auto;
                        max-height: 100%;
                        max-width: 100%;
                      "
                      :src="$store.state.user.BASE_URL + v.tsPic[0]"
                      controls="controls"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-form>
    </div>
    <el-dialog
      title="审核"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
      :center="true"
    >
      <div style="display: flex; align-items: center; justify-content: center">
        <span>是否通过审核</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="fou">否</el-button>
        <el-button type="primary" @click="queding">是</el-button>
      </span>
    </el-dialog>
  </div>
 </div>
</template>

<script>
import { gradeList } from "@/api/conmmon";
import { stuTaskDetails } from "@/api/sports/examine";
import { auditJob } from "@/api/platformAudit";
export default {
  name: "particulars",
  data() {
    return {
      dialogVisible: false,
      stuInfo: [],
      myImg: [],
      img: [
        { img: "@/assets/404_images/404.png" },
        { img: "@/assets/404_images/404.png" },
        { img: "@/assets/404_images/404.png" },
      ],
      submitForm: {
        grade: "",

        sex: null,
        name: "",
      },
      gradeSource: [],
      gradeLoading: false,
      checkedDate: 1,
      dateWeek: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      options: [
        {
          value: 1,
          label: "男",
        },
        {
          value: 2,
          label: "女",
        },
        {
          value: 3,
          label: "全性别",
        },
      ],
      e: null,
      index: null,
      value: "",
      numberValue: 1,
    };
  },
  created() {
    this.getInfo();
    this.getGradeSource();
  },
  components: {},
  methods: {
    changeAuditJob(e, index) {
      this.dialogVisible = true;
      (this.e = e), (this.index = index);
    },
    queding() {
      let data = {
        id: this.index == 1 ? this.e.trId : this.e.fsId,
        typeJob: this.index,
        status: "1",
      };
      auditJob(data).then((response) => {
        if (response.code == 200) {
          this.dialogVisible = false;
          this.$message.success(response.message);
          this.getInfo();
        } else {
          this.$message.error(response.message);
        }
      });
    },
    fou() {
      let data = {
        id: this.index == 1 ? this.e.trId : this.e.fsId,
        typeJob: this.index,
        status: "0",
      };
      auditJob(data).then((response) => {
        if (response.code == 200) {
          this.dialogVisible = false;
          this.$message.success(response.message);
          this.getInfo();
        } else {
          this.$message.error(response.message);
        }
      });
    },
    back() {
      this.$router.back({
        path: "/sports/examine",
      });
    },
    getInfo() {
      let data = {
        pjStuId: JSON.parse(this.$route.query.row).stuid + "",
        pjTodayTime: this.$route.query.time,
      };
      stuTaskDetails(data).then((res) => {
        this.stuInfo = res.result;
      });
    },
    onSubmit() {},
    getGradeSource() {
      this.gradeLoading = true;
      gradeList({ schoolId: this.$store.state.user.USER_INFO.pscShId }).then(
        (response) => {
          if (response.code === 200) this.gradeSource = response.result;
          this.gradeLoading = false;
        }
      );
    },
    changeWeek(index) {
      this.checkedDate = index;
    },
    isFu() {},
    close() {
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  padding: 2vh 15vw;
}
.course-top {
  display: flex;
  justify-content: space-between;
  padding: 1vh 0;
  ::v-deep .el-breadcrumb__inner {
    font-size: 1vw;
  }
  .top-right {
    font-size: 1vw;
    color: #1677ff;
  }
}
.container {
  height: 84vh;
  max-height: 84vh;
  overflow-y: auto;
  background: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.07);
    border-radius: 4px;
}
::v-deep .el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

::v-deep .el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

::v-deep .el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
::v-deep .el-carousel__arrow {
  top: 30%;
}
::v-deep .el-carousel__item {
  width: 105px;
  height: 180px;
  left: 45px;
}
.showAll {
  width: 85%;
  background: #eff7ff;
  height: 50px;
  margin-left: 30px;
  display: flex;
  align-items: center;
  margin-top: -20px;
  div {
    text-align: center;
    // margin-left: 10px;
    color: #1890ff;
    span {
      font-size: 14px;
      margin-left: 3px;
    }
  }
}
.project-item {
  margin-left: 30px;
  width: 85%;
  .item-top {
    height: 40px;
    background: #f6f8f9;
    display: flex;
    align-items: center;
    justify-content: center;
    // position: relative;
    span {
      font-size: 14px;
    }
    div {
      position: absolute;
      right: 40px;
      color: #1890ff;
      span {
        font-size: 12px;
      }
      i {
        margin-right: 5px;
        &:before {
          font-size: 12px;
        }
      }
    }
  }

  .item-main {
    width: 550px;
    height: 200px;
    padding: 12px 0;
    box-sizing: border-box;
    display: flex;
    .main-image {
      width: 300px;
      display: flex;
      justify-content: center;
      img {
        min-width: 300px;
        max-width: 100%;
        max-height: 100%;
        height: auto;
        width: auto;
        border-radius: 4px;
      }
    }
    .main-right {
      display: flex;
      flex-direction: column;
      padding-left: 25px;
      .main-title {
        color: #3d3d3d;
        font-size: 14px;
      }
      .main-orientation {
        color: #878787;
        font-size: 12px;
        margin-top: 5px;

        span {
          &:last-child {
            margin-left: 5px;
          }
        }
      }
      .main-number {
        color: #3d3d3d;
        display: flex;
        font-size: 14px;
        margin-top: 23px;
        align-items: center;
        ::v-deep .el-input {
          width: 60px;
          margin-left: 20px;
          ::v-deep .el-input__inner {
            height: 10px;
          }
        }
      }
      .main-sex {
        color: #4f4f4f;
        display: flex;
        font-size: 14px;
        margin-top: 20px;
        align-items: center;
        ::v-deep .el-select {
          width: 100px;
          margin-left: 20px;
        }
      }
    }
  }
}
</style>
